<template>
  <h3>姓名：{{ person.firstName }}</h3>
  <h3>姓名：{{ person.lastName }}</h3>
  <h3>年龄：{{ person.age }}</h3>
  <hr>
  <h3>Vue2计算属性-全名：{{ fullNameVue2 }}</h3>
  <h3>Vue3计算属性-全名：{{ person.fullName }}</h3>
  <input type="text" v-model="person.fullName">
</template>

<script>
import { reactive, computed } from 'vue'

export default {
  name: 'School-Comp',
  computed: {
    fullNameVue2() {
      return this.person.firstName + "-" + this.person.lastName
    }
  },
  setup() {
    // 数据
    let person = reactive({
      firstName: '张',
      lastName: '三',
      age: 18
    });

    // 计算属性-简写（计算属性只读，不可修改）
    // person.fullName = computed(function () {
    //   return person.firstName + person.lastName
    // });

    // 计算属性-完整写法
    person.fullName = computed({
      get() {
        return person.firstName + "-" + person.lastName;
      },
      set(value) {
        const nameArr = value.split("-");
        person.firstName = nameArr[0];
        person.lastName = nameArr[1];
      }
    });

    return { person }

  },
}
</script>

<style></style>
